<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(139,183,249)'}' opacity='.15' /%3E%3Cpath d='M511.150545 264.506182h-0.314181a239.243636 239.243636 0 1 0 56.413091 472.203636l6.656-1.524363 78.091636 23.179636a25.472 25.472 0 0 0 32.791273-24.436364v-63.872a2.978909 2.978909 0 0 1 0.756363-1.989818l1.489455-1.687273a247.296 247.296 0 0 0 63.069091-142.498909 239.488 239.488 0 0 0-238.964364-259.409454m0.849455 320.395636a89.995636 89.995636 0 0 1-90.112-89.890909 20.759273 20.759273 0 0 1 20.782545-20.724364h0.349091a20.747636 20.747636 0 0 1 20.445091 20.724364 48.64 48.64 0 1 0 97.082182 0 20.782545 20.782545 0 0 1 41.576727 0 90.007273 90.007273 0 0 1-90.112 89.890909' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(109,169,247)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
